<template>
  <view class="body">
    <view class="body_item">
      <view>退款商品</view>
      <view class="flex goodsItem" v-for="item in detail.items" :key="item.id">
        <view
          class="goods-cover cover"
          :style="{ backgroundImage: `url(${item.productImageUrl})` }"
        ></view>
        <view class="flex" style="width: 100%">
          <view class="goods-name">
            {{ item.productName }}
          </view>
          <view class="order-total">
            <view class="goods-price">¥{{ item.productSkuPrice || 0 }}</view>
            <view class="goods-count">x{{ item.productSkuQuantity }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="body_item">
      <view class="info_item" style="margin-bottom: 15px">
        <view class="item_content">
          <view class="item_left">物流单号</view>
          <input
            class="left_input"
            v-model="form.deliverySn"
            placeholder="请输入"
          />
          <image
            class="Icon"
            :src="ossImg('order/sys.png')"
            @click="scanCode"
          />
        </view>
      </view>

      <view class="info_item" style="margin-top: 15px">
        <view class="item_content">
          <view class="item_left">物流公司</view>
          <view class="item_right">
            <picker
              :value="form.deliveryCompanyName"
              @change="companyChange($event)"
              :range="logisticsCompeny"
            >
              <view>{{ form.deliveryCompanyName || "请选择物流公司" }}</view>
            </picker>
            <image class="arrow" :src="ossImg('personal/go@2x.png')" />
          </view>
        </view>
      </view>
    </view>

    <view class="confirmBtn">
      <button @click.stop="submit">确认</button>
    </view>
  </view>

  
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { refundDetail, refundInfo } from "@/services/mall";
import { message, ossImg } from "@/utils/utils";
import { Subscribe } from "@/services/utils";
import privacyPopup from "@/components/privacy-popup";

const form = reactive({
  orderRefundId: "", // 退款单id
  deliverySn: "", // 物流单号
  deliveryCompanyName: "", // 物流公司名称
});

const logisticsCompeny = ["顺丰快递", "韵达快递"];

const detail = ref({});

onLoad((option) => {
  console.log(option);
  getApp().accessLogAdd();
  GetDetail(option.id);
});

const GetDetail = async (id) => {
  const res = await refundDetail(id);
  if (res?.code === 200) {
    detail.value = res.data;
    form.orderRefundId = res.data.id;
    form.orderItemIds = res.data.items.map((obj) => {
      return obj.id;
    });
    console.log(form);
  }
};

const companyChange = (e) => {
  console.log(e);
  form.deliveryCompanyName = logisticsCompeny[parseInt(e.detail.value)];
};

const scanCode = () => {
  // 允许从相机和相册扫码
  uni.scanCode({
    success: function (res) {
      console.log("条码类型：" + res.scanType);
      console.log("条码内容：" + res.result);
      form.deliverySn = res.result;
    },
  });
};

const submit = () => {
  console.log(form);
  uni.requestSubscribeMessage({
    tmplIds: [process.env.REFUNDSUCCESSNOTICE],
    success: async (res2) => {
      console.log(res2);
      await Subscribe({
        appId: process.env.WXAPPID,
        orderId: form.orderRefundId,
        scene: ["REFUND_SUCCEED"],
      });
      // 订阅成功
      const res = await refundInfo({ ...form });
      if (res?.code === 200) {
        message("提交成功");
        uni.navigateBack({ delta: 1 });
      } else {
        message(res.message);
      }
    },
    fail: function (err) {
      console.log(err);
    },
  });
};
</script>
<style lang="less" scoped>
.body {
  box-sizing: border-box;
  padding: 10px;

  .body_item {
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 15px 10px;
    font-size: 14px;
    margin-bottom: 10px;

    .goodsItem {
      margin-top: 10px;
    }

    .goods-cover {
      width: 68px;
      min-width: 68px;
      height: 68px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.2);
    }

    .goods-name {
      padding: 0 12px 0 8px;
      box-sizing: border-box;
      font-size: 14px;
      flex: 1;
      color: #353535;
    }

    .order-total {
      color: #353535;
      text-align: right;
      font-size: 14px;

      .goods-count {
        font-size: 12px;
        color: #818181;
        line-height: 1;
        margin-top: 5px;
      }
    }

    .info_item {
      width: 100%;

      .item_content {
        box-sizing: border-box;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;

        .item_left {
          margin: auto 0px;
        }

        .left_input {
          width: 230px;
        }

        .item_right {
          margin-right: 15px;
          height: 100%;
          color: #999;

          input {
            text-align: right;
          }

          picker {
            display: inline-block;
            margin-right: 5px;
          }

          .arrow {
            width: 10rpx;
            height: 18rpx;
          }
        }

        .Icon {
          width: 15px;
          height: 15px;
          margin-right: 15px !important;
          margin: auto 0;
        }
      }
    }
  }

  .confirmBtn {
    box-sizing: border-box;
    position: fixed;
    bottom: 30px;
    margin: 0 auto;
    text-align: center;
    left: 0;
    right: 0;

    button {
      width: 300px;
      height: 40px;
      line-height: 40px;
      background: #0058c6;
      border-radius: 20px;
      color: white;
      font-size: 16px;

      &::after {
        border: none;
      }
    }
  }
}
</style>